<template>
		<div class="loginView">
				<!--	左侧背景	-->
				<div class="login-bg">
						<span class="login-bg-icon"></span>
				</div>
				<!--	右侧登录界面	-->
				<div  class="loginForm">
						<!--			表单输入			-->
						<div class="loginFormInput">
								<h2 class="loginFormInput-title">登录</h2>
								<!--				登录输入框				-->
								<el-input v-model="username"  placeholder="用户名" class="loginFormInput-title-checkbox">
										<template #prefix>
												<i class="el-icon el-input__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0z"></path></svg></i>
										</template>
								</el-input>
								<el-input v-model="password"  placeholder="密码" type="password" show-password class="loginFormInput-title-checkbox">
										<template #prefix>
												<i class="el-icon el-input__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z"></path><path fill="currentColor" d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm192-160v-64a192 192 0 1 0-384 0v64h384zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64z"></path></svg></i>
										</template>
								</el-input>
								<!--				登录功能				-->
								<div class="loginFunc">
										<el-checkbox v-model="isRemember" @change="userRemember" label="记住我" size="large" />
										<span style="font-size: 14px;display: inline-block">忘记密码？</span>

								</div>
								<el-button type="primary" class="loginFunc-submit" @click="userLogin">登录</el-button>
								<div class="loginFunc-register">注册 →</div>
						</div>
						<!--			提示			-->
						<div class="loginFormHint">
								个人练习项目，请勿用于商业用途
						</div>
				</div>
	</div>
</template>

<script setup lang="ts">
import {ref} from "vue";

import {userLoginRequest} from "@/networks/requests/userRequest";

const username = ref("Administrator");
const password = ref("00000000");
const isRemember = ref(false); // 是否记住登录状态

function userRemember() {
		console.log(isRemember.value)
}

// 提交登录表单
async function userLogin() {
		const {data} = await userLoginRequest({
				username: username.value,
				password: password.value
		});

		if(data != null && data?.code == 0) { //请求成功
				// 将token存入
				const token = data?.data;
				window.sessionStorage.setItem("Authorization", token)
		}
}

</script>

<style scoped lang="less">
.loginView {
		display: flex;
		flex-direction: row;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.login-bg {
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: url("https://fe-bigevent-web.itheima.net/assets/login_bg-963efa51.jpg");
				border-radius: 0 20px 20px 0;
				.login-bg-icon {
						width: 30%;
						height: 30%;
						background-image: url("https://fe-bigevent-web.itheima.net/assets/logo2-614f2fe8.png");
						background-repeat: no-repeat;
						background-size: contain;
				}
		}

		.loginForm {
				width: 50%;
				height: 100%;
				background-color: var(--white-color);
				display: flex;
				flex-direction: column;
				justify-content: center;
				box-sizing: border-box;
				padding: 10rem 6rem 0 8.5rem;

				.loginFormInput {
						width: 100%;
						height: 65%;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;

						.loginFormInput-title-checkbox {
								width: 21rem;
								height: 2rem;
								margin: 0 0 20px 0;
						}

						.loginFormInput-title {
								margin-bottom: 50px;
						}
				}

				.loginFunc {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 21rem;
				}

				.loginFunc-submit{
						width: 21rem;
						margin-top: 20px;
				}

				.loginFunc-register {
						font-size: var(--form-content-font-size);
						color: var(--form-content-font-color);
						margin-top: 40px;
				}

				.loginFormHint {
						width: 100%;
						height: 35%;
				}
		}
}
</style>